<template>
	<view class="body">
		<view class="top-box">
			<view class="row-box" v-if="isAlreadyLogin">
				<image :src="userBaseInfo.avatarUrl" class="avatar-url-box"></image>
				<view class="no-login-text-box" @click="geren()">
					<text class="login">{{loginUserinfo.name}}</text>
					<text class="welcome">{{loginUserinfo.phone}}欢迎来到挂号系统</text>
				</view>
			</view>
			<view class="row-box" v-else @click="turnLogin()">
				<image src="/static/center/unknownAvatar.png" class="no-login-img"></image>
				<view class="no-login-text-box">
					<text class="login">点击注册/登录</text>
					<text class="welcome">欢迎来到挂号系统</text>
				</view>
			</view>
		</view>
		<view class="bottom-outbox"> 
			<view class="option-inbox" @click="geren()">
				<image class="icon" src="/static/jhimage/user.png"></image>
				<text class="text">我的信息</text>
			</view>
			<view class="option-inbox" @click="toCardList()">
				<image class="icon" src="/static/jhimage/book.png"></image>
				<text class="text">报告查询</text>
			</view>
			<view class="option-inbox" @click="wodeguahaoRecored()">
				<image class="icon" src="/static/jhimage/wait.png"></image>
				<text class="text">预约记录</text>
			</view>
			<view class="option-inbox" @click="zhifu()">
				<image class="icon" src="/static/jhimage/money.png"></image>
				<text class="text">我要缴费</text>
			</view>
			<view class="option-inbox" @click="daohao()">
				<image class="icon" src="/static/jhimage/map.png"></image>
				<text class="text">医院导航</text>
			</view>
			<view class="option-inbox" @click="outLogin()" v-if="isAlreadyLogin">
				<image class="icon" src="/static/jhimage/logout.png"></image>
				<text class="text">退出登录</text>
			</view>
			<view class="option-inbox" @click="turnLogin()" v-else>
				<image class="icon" src="/static/jhimage/login.png"></image>
				<text class="text">马上登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { error } from '@/common/js/errorTips.js'
	import { getUserBaseInfo } from '@/common/api/userInfo.js'
	import {CDN_PATH, MOYUAN_KEY, BAIQIAN_KEY, YULU_KEY, DIFUNI_KEY, REFERER} from '../../common/config/appConfig.js';
	export default {
		data() {
			return {
				isAlreadyLogin: uni.getStorageSync('isAlreadyLogin') || '', // 用于记录是否登录
				isGetTreatCard: false, // 是否填写信息获取了自己的就诊卡
				iconUrl: '/static/center/',
				gender: 1 ,
				userBaseInfo: {
					name: '',
					avatarUrl: '',
					phone: ''
				},
				loginUserinfo:{
					id: 0,
					name: '',
					phone: '',
					truename :'',
				},
				cardID: uni.getStorageSync('cardID') || '',
				
				endPoint: {
					name: '中国医科大学附属盛京医院(南湖院区)',
					latitude: 41.773602576,
					longitude: 123.426632989
				},
				customStyles: [
					{text: '墨渊', value: MOYUAN_KEY, icon: `${CDN_PATH}/iconMapMoyuan@3x.png`},
					{text: '白浅', value: BAIQIAN_KEY, icon: `${CDN_PATH}/iconMapBaiqian@3x.png`},
					{text: '玉露', value: YULU_KEY, icon: `${CDN_PATH}/iconMapYulu@3x.png`},
					{text: '自定义', value: DIFUNI_KEY}
				],
				themeColors: [
					{text: '', value: '#427CFF'},
					{text: '', value: '#85d5c8'},
				],
				keyIndex: 0,
				chooseType: '',
				modes: [
					{text: '驾车', value: 'driving'},
					{text: '公交', value: 'transit'},
					{text: '步行', value: 'walking'}
				],
				modeIndex: 0,
				isNavigate: false,
				slatitude:0,
				slongitude:0
			}
		},
		onPullDownRefresh() {
			this.getUserInfo()
			this.isAlreadyLogin = uni.getStorageSync('isAlreadyLogin')
		},
		methods: {
			// 跳转到登录页面
			turnLogin: function() {
				uni.navigateTo({
					url: '/pages/yuyue/login'
				})
			},
			zhifu(){
				if(this.isAlreadyLogin) {
					uni.navigateTo({
						url: '/pages/yuyue/jiaofei'
					})
				} else {
					error('请先登录')
				} 
			},
			daohao(){
				
				
				var that = this;
				wx.getLocation({
					type:'wgs84',
					success:function(res){
						console.log(JSON.stringify(res));
						console.log(res);
						that.slatitude=res.latitude;
						that.slongitude = res.longitude;
						console.log("slatitude:"+that.slatitude);
						console.log("slongitude"+that.slongitude);
						
						
						const startPointnow={
							'name':'我的位置',
							'latitude':that.slatitude,
							'longitude':that.slongitude
						};
						console.log(JSON.stringify(startPointnow));
						if (!that.endPoint) {
							wx.showToast({
								title: '请选择终点位置',
								icon: 'none',
								duration: 1500,
								mask: false
							});
							return;
						} 
						const plugin = requirePlugin('routePlan');
						const key = '6F6BZ-P73WJ-J5FFA-KFC5N-IKGBT-GXFWA';
						const referer = REFERER;
						const endPoint = JSON.stringify(that.endPoint);
						const startPoint = startPointnow ? JSON.stringify(startPointnow) : '';
						const mode = that.modes[that.modeIndex].value;
						const navigation = that.isNavigate ? 1 : 0;
						let url = 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint +
						'&mode=' + mode + '&navigation=' + navigation + '&themeColor=' + that.themeColor;
						if (startPoint) {
							url += '&startPoint=' + startPoint;
							console.log(url);
						}
						wx.navigateTo({
							url
						});
							
					}
				});
				
				
				
			},
			geren(){
				if(this.isAlreadyLogin) {
					uni.navigateTo({
						url: '/pages/yuyue/userinfo'
					})
				} else {
					error('登录')
				} 
			},
			// 报告查询
			toCardList:function() {
				if(this.isAlreadyLogin) {
					uni.navigateTo({
						url: '/pages/yuyue/baogao'
					})
				} else {
					error('登录')
				} // end if
			},
			// 跳转到候诊队列
			toAwaitingQueue: function() {
				if(this.isAlreadyLogin) {
					uni.navigateTo({
						url: '/pagesA/pages/awaitingQueue/awaitingQueue'
					})
				} else {
					error('登录')
				} // end if
				
			},
			// 跳转到信用详情
			toCreditDetail: function() {
				if(this.isAlreadyLogin) {
					uni.navigateTo({
						url: '/pagesA/pages/creditDetail/creditDetail'
					})
				} else {
					error('登录')
				} // end if
				
			},
			// 跳转到挂号记录
			wodeguahaoRecored: function() {
				if(this.isAlreadyLogin) {
					uni.navigateTo({
						url: '/pages/yuyue/wodeguahaoRecored'
					})
				} else {
					error('请登录')
				} 
				
			},
			// 跳转到就诊记录
			toTreatRecord: function() {
				if(this.isAlreadyLogin) {
					uni.navigateTo({
						url: '/pagesA/pages/treatRecord/treatRecord'
					})
				} else {
					error('登录')
				} // end if
				
			},
			// 跳转到关于我们页面
			toAboutUs: function() {
				uni.navigateTo({
					url: '/pagesA/pages/aboutUs/aboutUs'
				})
			},
			// 跳转到基本信息页面
			toBaseInfo: function() {
				uni.navigateTo({
					url: '/pagesB/pages/center/baseInfo/baseInfo'
				})
			},
			// 退出登录
			outLogin: function() {
				let that = this
				uni.showModal({
				    title: '退出登录',
				    content: '是否退出登录？',
				    confirmText: "确认",
				    cancelText: "取消",
				    success: function (res) {
				        if (res.confirm) {
				            uni.removeStorageSync('isAlreadyLogin');
							uni.removeStorageSync('userLoginInfo.id');
							uni.removeStorageSync('userLoginInfo.name');
							uni.removeStorageSync('userLoginInfo.phone');
							uni.removeStorageSync('userLoginInfo.truename');
							that.isAlreadyLogin = false
				        }else{
							
				        }
				    }
				});
			},
			// 获取用户信息
			getUserInfo: function() {
				var loginUserinfo = {
					id: uni.getStorageSync("userLoginInfo.id"),
					name: uni.getStorageSync("userLoginInfo.name"),
					phone: uni.getStorageSync("userLoginInfo.phone"),
					truename: uni.getStorageSync("userLoginInfo.truename")
				}
				this.loginUserinfo = loginUserinfo
				this.userBaseInfo.name = loginUserinfo.name
				this.userBaseInfo.avatarUrl = 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2641373536,3450676990&fm=26&gp=0.jpg'
				},
		},
		onShow() {
			if(uni.getStorageSync('isAlreadyLogin')) {
				this.getUserInfo()
			}
			this.isAlreadyLogin = uni.getStorageSync('isAlreadyLogin')
		},
		onLoad() {
			if(uni.getStorageSync('isAlreadyLogin')) {
				this.getUserInfo()
			}
			this.isAlreadyLogin = uni.getStorageSync('isAlreadyLogin')
		}
	}
</script>

<style lang="scss">
	page {
		@extend .page-backgroud;
	}

	@import '@/common/scss/common.scss';
	$major-color: #7EC0EE;

	.top-box {
		width: 100%;
		height: 250rpx;
		background: $major-color;

		// 头像与信息的盒子
		.row-box {
			@include width-margin(90%, 100%);
			@include flex-direction(row);
			align-items: center;
			justify-content: space-between;

			// 头像框
			.avatar-url-box {
				@include userAvatarUrl-box(90px, 90px, 12px);
			}

			// 姓名和卡号的box
			.name-card-box {
				width: 50%;
				height: 90%;
				margin-top:40px;
				color:#fffcf1;
				font-family: '宋体';
				font-size: 15px;
			}

			// 向右的箭头icon
			.right-white-icon {
				@include icon-size(70rpx, 70rpx);
				margin-left: 40rpx;
			}

			// 当用户没有登录时
			.no-login-img {
				@include userAvatarUrl-box(90px, 90px, 12px);
				background: #FFFFFF;
			}

			.no-login-text-box {
				width: 70%;
				height: 50%;
				margin-left: 40rpx;
				@include flex-direction(column);

				.login {
					height: 70rpx;
					@include font-style(19px, bold, #ffffff);
				}

				.welcome {
					height: 50rpx;
					@include font-style(15px, 400, #ffffff);
				}
			}
		}
	}

	// 账户以及挂号记录box
	.account-acord-outbox {
		width: 100%;
		height: 130rpx;
		margin-top: 30rpx;
		background: #FFFFFF;

		.account-acord-inbox {
			@include width-margin(90%, 100%);
			@include flex-direction(row);

			.left-right-half {
				width: 50%;
				height: 100%;
				@include flex-direction(row);
				align-items: center;

				.icon {
					@include icon-size(80rpx, 80rpx);
					margin-right: 20rpx;
				}

				.text {
					width: 70%;
					@include font-style(18px, 500, #A6A6A6);
				}
			}
		}
	}

	// 各种选项
	.bottom-outbox {
		width: 100%;
		height: 100%;
		background: #FFFFFF;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		@include flex-direction(column);

		.option-inbox {
			@include width-margin(90%, 130rpx);
			@include flex-direction(row);
			align-items: center;

			.icon {
				@include icon-size(80rpx, 80rpx);
				margin-right: 20rpx;
			}

			.text {
				@include font-style(18px, 500, #A6A6A6);
			}
		}

		// 最后一个不加下划线
		.option-inbox:not(:last-child) {
			border-bottom: 1px solid #F4F4F4;
		}
	}
</style>
